<template>
	<div class="home">
		<!-- 搜索栏 -->
		<div class="content_search">
			<!-- 按钮 -->
			<div class="left_button">
				<el-radio-group v-model="radioVal" size="large">
					<el-radio-button label="sale_">销量</el-radio-button>
					<el-radio-button label="_money">销售额</el-radio-button>
				</el-radio-group>
			</div>
			<div class="right_input">
				<!-- 下拉input -->
				<el-select v-model="selectVal" class="m-2" placeholder="Select" size="large">
					<el-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</div>
		</div>
		<!-- 图表 -->
		<div id="pieContainer"></div>
		<!-- 分布图标题 -->
		<p class="title_box">全国销量分布图</p>
		<div id="mapContainer"></div>
	</div>
</template>

<script setup lang="ts">
import { ref, nextTick, watch, onMounted } from "vue";
import * as admin from "@/request/modules/admin";
import type { Ref } from "vue";
import type { IAdminStatRes } from "@/types/global";
// 引入所有图表
import * as echarts from "echarts";
import chinaMapJson from "@/josn/chinaMap.json";
type EChartsOption = echarts.EChartsOption;
// input选项
const selectVal = ref("yesterday");
const selectOptions = [
	{
		value: "yesterday",
		label: "昨天",
	},
	{
		value: "today",
		label: "今天",
	},
	{
		value: "three_days",
		label: "前3天",
	},
	{
		value: "seven_days",
		label: "前7天",
	},
	{
		value: "fourteen_days",
		label: "前14天",
	},
];
const radioVal = ref("sale_");
let pieChart: any;
var mapOption: EChartsOption;
const statInfo = ref({}) as Ref<IAdminStatRes>;
let pieOption: EChartsOption;
let str = "";
watch([radioVal, selectVal], (newVal) => {
	if (newVal[0] === "sale_") {
		str = newVal[0] + newVal[1];
	} else {
		str = newVal[1] + newVal[0];
	}
	console.log(str);
	drawPie(str);
});
// 绘制图表的封装
async function drawCharts() {
	// 确保能拿到DOM
	await nextTick();
	// 基于准备好的dom，初始化echarts实例
	pieChart = echarts.init(document.getElementById("pieContainer")!);
	// 请求数据
	statInfo.value = await admin.getAdminStatAPI();
	// console.log(statInfo);
	drawPie("sale_yesterday");

	// 地图绘制
	var mapChart = echarts.init(document.getElementById("mapContainer")!);
	echarts.registerMap("China", chinaMapJson as any);

	mapChart.setOption(
		(mapOption = {
			tooltip: {
				trigger: "item",
				formatter: "{b}<br/>销量：{c}",
				backgroundColor: "rgba(0,0,0,0.7)",
				textStyle: {
					color: "#fff",
				},
			},
			toolbox: {
				show: true,
				orient: "vertical",
				left: "right",
				top: "center",
				feature: {
					dataView: { readOnly: false },
					restore: {},
					saveAsImage: {},
				},
			},
			visualMap: {
				min: 100000,
				max: 850000,
				text: ["High", "Low"],
				realtime: false,
				calculable: true,
				inRange: {
					color: ["#fdc6c0", "#fca79e", "#fb6f51", "#ff4806"],
				},
				top: "middle",
			},
			series: [
				{
					type: "map",
					map: "China",
					label: {
						show: true,
					},
					emphasis: {
						itemStyle: {
							areaColor: "#8884d8",
						},
					},
					data: statInfo.value.saleMap.map((item) => {
						return {
							name: item.areaName,
							value: item.saleNum,
						};
					}),
					// 自定义名称映射
				},
			],
		})
	);
}

drawCharts();
// 生成配置项的封装
function drawPie(str: string) {
	// 配置项
	pieOption = {
		tooltip: {
			trigger: "item",
			formatter: "{b}：{c}({d}%)",
		},
		legend: {
			top: "5%",
			left: "right",
			width: "300",
		},
		series: [
			{
				name: "Access From",
				type: "pie",
				radius: ["30%", "60%"],
				center: ["30%", "50%"],
				avoidLabelOverlap: false,
				label: {
					show: true,
					position: "outside",
				},
				emphasis: {
					label: {
						show: true,
					},
				},
				labelLine: {
					show: true,
				},
				data: statInfo.value.salePie.map((item: any) => {
					return {
						name: item.name,
						value: item[str],
					};
				}),
			},
		],
	};
	// 通过配置项绘制相应图表
	pieChart.setOption(pieOption);
}
</script>

<style lang="less" scoped>
// #263445
.home {
	padding: 20px;
	.content_search {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	#pieContainer {
		width: 100%;
		height: 400px;
	}
	.title_box {
		height: 50px;
		text-align: center;
		border-top: 2px solid #f0f0f0;
		padding: 15px;
	}
	#mapContainer {
		width: 100%;
		height: 1000px;
	}
}
</style>
